<template>
  <q-page>
    <q-img
      src="../assets/background.jpg"
      img-class="my-custom-image"
      class="fixed-center"
      fit="cover"
      height=100%
    />
    <q-card class="login-frame q-ma-md">
      <q-card-section>
        <div class="text-h4 q-mb-md">欢迎您！</div>
        <q-input outlined v-model="form.uid" label="用户名(学号）" class="q-mb-md" />
        <q-input outlined v-model="form.password" type="password" label="密码" />
      </q-card-section>
      <q-separator />
      <q-card-actions>
        <q-btn flat @click="doLogin">登陆</q-btn>
        <q-btn flat @click="doRegist">注册</q-btn>
      </q-card-actions>
    </q-card>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'
import { Notify } from 'quasar'

export default defineComponent({
  data () {
    return {
      form: {
        uid: '',
        password: ''
      }
    }
  },
  methods: {
    doLogin () {
      this.$store.dispatch('session/login', this.form)
        .then((user) => {
          this.$router.replace('/')
        })
        .catch(error => {
          Notify.create({ timeout: 500, message: '登陆失败！原因：' + error + '：' + error.response.data.detail })
        })
    },
    doRegist () {
      Notify.create({ timeout: 100, message: '暂不开放注册' })
    }
  }
})
</script>

<style lang="sass">
.login-frame
  position: fixed
  top: 22%
  right: 10%
</style>
